import React, { useState } from 'react'
import Image from 'next/image'
import BaseCard from '../base/baseCard'
import bannerMap from '@/public/image/bannerMap.png'
import iconBook from '@/public/image/iconBook.png'
import type { OpenTypes } from '@/app/(commonLayout)/apps/component/base/createModal'
import CreateModal from '@/app/(commonLayout)/apps/component/base/createModal'

type Props = {
  data?: any
}

const AllPage: React.FC<Props> = () => {
  const [isAddOpen, setIsAddOpen] = useState<OpenTypes>({
    isOpen: false,
    title: '',
  })

  const HeaderJs = [
    {
      title: '创建Agent',
      text: '点击"创建Agent"，填写信息、选择大模型、插件等，配置完成进行调优，保存后可在个人空间查看和修改Agent',
      mode: 'agent-chat',
      name: 'Agent',
    },
    {
      title: '创建插件',
      text: '点击"创建插件"，可通过url地址接入和代码创建(支持线上调试)2种方式构建插件，保存后可在个人空间查看和修改插件',
      mode: 'chat',
      name: '插件',
    },
    {
      title: '创建工作流',
      text: '点击"创建工作流"，在画布上通过拖拽和节点配置的方式构建工作流，支持线上对工作流进行测试，保存后可在个人空间查看和修改工作流',
      mode: 'workflow',
      name: '工作流',
    },
  ]
  const dataJS = [
    {
      title: '创建Agent',
      text: '点击"创建Agent"，填写信息、选择大模型、插件等，配置完成进行调优，保存后可在个人空间查看和修改Agent',
    },
    {
      title: '发布Agent',
      text: '发布Agent有三种形式：发布后仅个人使用，发布到Agent广场，从项目空间中进行发布，三种发布后的被查看范围不同',
    },
    {
      title: 'Agent广场',
      text: 'Agent广场包含系统提供的默认Agent，及用户发布到广场后的Agent，广场内Agent默认全部公开',
    },
    // {
    //   title: 'Prompt 模板',
    //   text: '可选择系统提供prompt模板，支持自主备份',
    // },
  ]
  const pluginsIntro = [
    {
      title: '创建插件',
      text: '点击"创建插件"，可通过url地址接入和代码创建(支持线上调试)2种方式构建插件，保存后可在个人空间查看和修改插件',
    },
    {
      title: '发布插件',
      text: '发布插件有三种形式：发布后仅个人使用，发布到插件广场，从项目空间中进行发布，三种发布后的被查看范围不同',
    },
    {
      title: '插件广场',
      text: '插件广场包含系统提供的默认Agent，及用户发布到广场后的插件，广场内插件默认全部公开',
    },
    // {
    //   title: 'Prompt 模板',
    //   text: '可选择系统提供prompt模板，支持自主备份',
    // },
  ]
  const workflowIntro = [
    {
      title: '创建工作流',
      text: '点击"创建工作流"，在画布上通过拖拽和节点配置的方式构建工作流，支持线上对工作流进行测试，保存后可在个人空间查看和修改工作流',
    },
    {
      title: '发布工作流',
      text: '发布工作流有三种形式：发布后仅个人使用，发布到工作流广场，从项目空间中进行发布，三种发布后的被查看范围不同',
    },
    {
      title: '工作流广场',
      text: '工作流广场包含系统提供的默认工作流，及用户发布到广场后的工作流，广场内工作流默认全部公开',
    },
    // {
    //   title: 'Prompt 模板',
    //   text: '可选择系统提供prompt模板，支持自主备份',
    // },
  ]
  return (
    <>
      <div className='flex h-[420px] w-[100%] mt-[48px]' style={{
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100% 100%',
        backgroundImage: 'url(\'/agent-platform-web/bg/allBanner.png\')',
        flexDirection: 'column',
        position: 'relative',
      }}>
        <Image src={bannerMap} alt='img' style={{
          position: 'absolute',
          color: 'transparent',
          transformOrigin: 'top right',
          right: 0,
          top: 0,
          transform: 'scale(1.5)',
          zIndex: 1,
        }} />
        <div style={{ marginLeft: '50px' }}>
          <p className='text-[#216EFF] text-[36px] mt-[64px] font-bold'>智能体开放平台</p>
          <p className='text-[#27292B] text-[16px] mt-[23px] font-medium'>提供全套工具和能力，开发者可根据自己的需求快速搭建Agent</p>
        </div>
        <div className='flex' style={{ marginLeft: '50px', marginTop: '50px', zIndex: 2 }}>{HeaderJs?.map((item, index) => (<BaseCard onOpen={({ params }) => {
          setIsAddOpen({
            ...params,
          })
        }} data={item} key={index} />))}</div>
      </div>

      <div className='mt-[19px]'>
        <div className='text-[20px] mb-[24px] text-[#1C2748] font-bold'>新手引导</div>
        <div className='w-[100%] bg-[#fff] rounded-[10px] px-[33px] pt-[28px] pb-[10px] mb-[16px]'>
          <div className='flex mb-[24px]'>
            <Image src={iconBook} alt='img' width={32} className='mr-[7px] h-[32px]' />
            <div className='text-[18px] my-auto font-medium'>Agent</div>
          </div>
          <div className='flex flex-wrap'>{dataJS?.map((item, index) => (<BaseCard data={item} key={index} />))}</div>
        </div>
        <div className='w-[100%] bg-[#fff] rounded-[10px] px-[33px] py-[28px] mb-[16px]'>
          <div className='flex mb-[24px]'>
            <Image src={iconBook} alt='img' width={32} className='mr-[7px] h-[32px]' />
            <div className='text-[18px] my-auto font-medium'>插件</div>
          </div>
          <div className='flex'>{pluginsIntro?.map((item, index) => (<BaseCard data={item} key={index} />))}</div>
        </div>
        <div className='w-[100%] bg-[#fff] rounded-[10px] px-[33px] py-[28px] mb-[16px]'>
          <div className='flex mb-[24px]'>
            <Image src={iconBook} alt='img' width={32} className='mr-[7px] h-[32px]' />
            <div className='text-[18px] my-auto font-medium'>工作流</div>
          </div>
          <div className='flex'>{workflowIntro?.map((item, index) => (<BaseCard data={item} key={index} />))}</div>
        </div>
      </div>
      {isAddOpen.isOpen ? <CreateModal isAddOpen={isAddOpen} onClose={(val: boolean) => setIsAddOpen({ ...isAddOpen, isOpen: val })} /> : null}
    </>
  )
}

export default AllPage
